<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/templates/main_template.xhtml">

	<ui:define name="header">
		<script type="text/javascript">
			//<![CDATA[
			//debe usarse los \\:  en lugar de : en los selectores de JQuery
			$(document).ready(function() {/* jquery code*/
				showContent("form_content", "personal_data.xhtml");		
				$("#form_wizard\\:personalData").addClass("current-edition").removeClass("disabled-edition").removeClass("enabled-edition");
			
        	});

			function setCurrentPageStyle(xhr, status, args, arg0) {
				console.log(args.view);
				console.log(status);
				console.log(xhr);
				console.log(arg0.source);
				showContent("form_content", args.view);
				//$(".ui-wizard a").removeClass("current-edition");
				$(".current-edition").removeClass("current-edition").addClass("enabled-edition");				
				$("#"+arg0.source.replace(":","\\:")).addClass("current-edition").removeClass("disabled-edition").removeClass("enabled-edition");
			}
			//]]>
		</script>
	</ui:define>
	<ui:define name="content">
		<div id="step-by-step clearfix">
			<h:form id="form_wizard" styleClass="clearfix ui-wizard">
				<p:commandLink id="personalData"
					actionListener="#{stepByStepController.viewPersonalData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-personal-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="personalData"
					value="#{i18n['lbl.owner.personal_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="contactData"
					actionListener="#{stepByStepController.viewContactData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-contact-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="contactData"
					value="#{i18n['lbl.owner.contact_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="economicData"
					actionListener="#{stepByStepController.viewEconomicData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-economic-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="economicData"
					value="#{i18n['lbl.owner.economic_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="innovationData"
					actionListener="#{stepByStepController.viewInnovationData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-innovation-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="innovationData"
					value="#{i18n['lbl.owner.innovation.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="associativityData"
					actionListener="#{stepByStepController.viewAssociativityData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-associativity-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="associativityData"
					value="#{i18n['lbl.owner.associativity.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="farmData"
					actionListener="#{stepByStepController.viewFarmData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-farm-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="farmData"
					value="#{i18n['lbl.owner.farm_general_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="forestBusinessData"
					actionListener="#{stepByStepController.viewForestBusinessData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-forest-business-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="forestBusinessData"
					value="#{i18n['lbl.owner.forest_business_perspective.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="ownershipLearningData"
					actionListener="#{stepByStepController.viewOwnershipLearningData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-ownership-learning-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="ownershipLearningData"
					value="#{i18n['lbl.owner.ownership_learning.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="confirmationData"
					actionListener="#{stepByStepController.viewConfirmationData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="disabled-edition float-left text-align-center">
					<div class="ui-button-confirmation-data"><span class="ui-flowbutton-icon" /></div>
				</p:commandLink>
				<p:tooltip for="confirmationData"
					value="#{i18n['lbl.owner.confirmation.title']}" />
			</h:form>
		</div>
		<br/>
		<div id="form_content" class="clearfix" />
		
	</ui:define>
</ui:composition>